<template>
  <div
    class="qrcode-bg"
    :style="{
      'background-size': deviceSize,

      width: deviceWidth,
      height: deviceHeight
    }"
  >
    <!-- <mt-header fixed title="绑定好嘞卡">
      <router-link to="" @click.prevent.native="Back" tag="span" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header> -->

    <div class="my-wrapper">
      <div class="avatar">
        <div
          style="height: 6.40625rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between;"
        >
          <img class="avatar-img" :src="userInfo.avatar" alt="" />
          <span class="nickname">{{ userInfo.name }}</span>
        </div>
        <!-- <img class="qrcode" src="../assets/img/二维码.jpg" alt="" /> -->
        <div
          id="qrcode-page"
          style="border: 1px solid #40ae36; margin: 0px auto;"
        ></div>
        <p class="houseInfo">
          {{ userInfo.villageName }}{{ userInfo.buildingNo }}栋{{
            userInfo.unitNo
          }}单元{{ userInfo.houseNumber }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
// import { mapGetters } from "vuex";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      deviceHeight: "",
      deviceWidth: "",
      deviceSize: "",
      deviceBottom: "",
      userInfo: {}
    };
  },

  created() {
    // localStorage.removeItem("pageName");

    this.initPage();
    // 查询绑定进来的 通过openId获得 头像、昵称、二维码、户室信息等数据
    if (this.$route.query.success) {
      this.getUserInfo();
    }

    // console.log("直接跳转过来的的二维码信息", this.$route.query.data);
    if (this.$route.query.data) {
      this.$route.query.data = JSON.parse(this.$route.query.data);

      this.userInfo = this.$route.query.data;
      this.$nextTick(() => {
        var rate = document.documentElement.clientWidth / 375;
        this.qrcode(this.userInfo.qrCode, rate);
      });
    }
  },
  mounted() {
    // this.qrcode();
    // this.$nextTick(() => {
    //   function onBridgeReady() {
    //     WeixinJSBridge.call("hideToolbar");
    //   }

    //   if (typeof WeixinJSBridge == "undefined") {
    //     if (document.addEventListener) {
    //       document.addEventListener(
    //         "WeixinJSBridgeReady",
    //         onBridgeReady,
    //         false
    //       );
    //     } else if (document.attachEvent) {
    //       document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
    //       document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
    //     }
    //   } else {
    //     onBridgeReady();
    //   }

    //   // WeixinJSBridge.call("hideToolbar");
    // });

    pushHistory();

    function pushHistory() {
      var state = {
        title: "title",
        url: "#"
      };
      window.history.pushState(state, "title", "#");
    }

    if (typeof window.addEventListener != "undefined") {
      window.addEventListener(
        "popstate",
        function(e) {
          WeixinJSBridge.invoke("closeWindow", {}, function(res) {});
        },
        false
      );
    } else {
      window.attachEvent("popstate", function(e) {
        WeixinJSBridge.invoke("closeWindow", {}, function(res) {});
      });
    }
  },
  methods: {
    qrcode(text, rate) {
      let qrcode = new QRCode("qrcode-page", {
        width: 207 * rate,
        height: 207 * rate, // 高度
        text: text, // 二维码内容
        colorDark: "#000", //前景色
        colorLight: "#fff", //背景色
        correctLevel: QRCode.CorrectLevel.L //容错等级
      });
      console.log("二维码", qrcode);
    },
    getUserInfo() {
      this.$axios
        .get(`/village/household/${localStorage.getItem("openId")}`, {
          params: {}
        })
        .then(({ data: res }) => {
          console.log("用户信息", res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.userInfo = res.data;
          this.$nextTick(() => {
            var rate = document.documentElement.clientWidth / 375;
            this.qrcode(this.userInfo.qrCode, rate);
          });
        })
        .catch(() => {});
    },
    initPage() {
      var _this = this;
      (function(doc, win) {
        var docEl = doc.documentElement, //根元素html
          //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            _this.deviceHeight = docEl.clientHeight + "px";
            _this.deviceWidth = docEl.clientWidth + "px";
            _this.deviceSize =
              docEl.clientWidth + "px" + " " + docEl.clientHeight + "px";
          };

        // 切换手机改变尺寸时执行
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener("DOMContentLoaded", recalc, false); // 绑定浏览器缩放与加载时间

        //  刷新手机时执行
        _this.deviceHeight = docEl.clientHeight + "px";
        _this.deviceWidth = docEl.clientWidth + "px";
        _this.deviceSize =
          docEl.clientWidth + "px" + " " + docEl.clientHeight + "px";
      })(document, window);
    }
    // Back() {
    //   this.$router.push({
    //     name: "confirmbind"
    //   });
    // }
  }
};
</script>
<style lang="scss">
p {
  margin: 0;
  padding: 0;
}
// $color-primary: #fff;
// .mint-header {
//   background-color: $color-primary;
//   color: #333;
//   font-weight: Bold;
//   font-size: 18px;
//   height: 58px;
// }
.qrcode-bg {
  background: url("../assets/img/二维码背景@2x.png") no-repeat;
  position: relative;
}
.my-wrapper {
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  padding: 0 2.5rem;
  box-sizing: border-box;
}
.avatar {
  text-align: center;
  width: 100%;
  height: 26.484375rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // justify-content: flex-start;
  align-items: center;
}
.avatar-img {
  width: 4.71875rem;
  height: 4.71875rem;
  border-radius: 50%;
}
// .qrcode {

// }
.houseInfo {
  margin-top: 1.5625rem;
  // transform: translateY(-1.5625rem);
  transform: translateY(-3rem);
}
#qrcode-page {
  width: 12.9375rem /* 207/16 */;
  height: 12.9375rem /* 207/16 */;
}
</style>
